<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>监测站点信息</title>
    <!--<script src="../Scripts/echarts/echarts.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
    <!--    <script src="./js/jquery-3.6.0.min.js"></script>-->
    <link rel="stylesheet" href="sdk/sdk.css"/>
    <link rel="stylesheet" href="sdk/helper.css"/>
    <link rel="stylesheet" href="sdk/iconfont.css"/>
    <!--引用百度地图API-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=NPdWAx6cjvSYcj68yrrCYfvVjGH3bUAu"></script>
    <!--<script src="../Scripts/echarts/map/js/china.js"></script>-->
    <style>

        /* 内容 */
        .BMap_pop div:nth-child(9) {
            top: 35px !important;
            border-radius: 7px;
        }

        /* 左上角删除按键 */
        .BMap_pop img {
            top: 45px !important;
            left: 720px !important;
        }

        .BMap_top {
            display: none;
        }

        .BMap_top div {
            background-color: white;
        }

        .BMap_bottom {
            display: none;
        }

        .BMap_center {
            display: none;
        }

        /* 隐藏边角 */
        .BMap_pop div:nth-child(1) div {
            display: none;
        }

        .BMap_pop div:nth-child(3) {
            display: none;
        }

        .BMap_pop div:nth-child(5) {
            display: none;
        }

        .BMap_pop div:nth-child(7) {
            display: none;
        }

        body::-webkit-scrollbar {
            display: none;//Chorme
        }
        .father{
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }
        #search-box{
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
        #map{
            flex: 9;
        }

    </style>
</head>
<body>
<div class="father">
    <div id="search-box"></div><!--style="width:100%;height:10%;" -->
    <!--百度地图容器-->
    <div style="border:#ccc solid 1px;font-size:12px;" id="map"></div><!--width:100%;height:700px;-->
</div>

<script src="sdk/sdk.js"></script>
<script>
    var returnData;
    var bluePoint = "\n";
    (function () {
        let amis = amisRequire('amis/embed');
        let amisJSON = {
            "type": "form",
            "api": {
                "method": "get",
                "url": "http://localhost:9999/tianqi/station/listAll?city=${city}&stationName=${stationName}",
                adaptor: function (payload, response) {
                    if (payload.status === 0) {
                        initMap(payload.data)
                    }else {
                        console.log("暂无数据");
                    }
                    return payload
                }
            },
            "body": [
                {
                    "type": "input-group",
                    "name": "input-group",
                    "body": [
                        {
                            "type": "input-text",
                            "name": "city",
                            "label": "城市名称",
                            "id": "cff14785bdb7",
                            "placeholder": "查询城市范围内的监测站点信息如：廊坊"
                        },
                        {
                            "type": "input-text",
                            "name": "stationName",
                            "label": "城市名称",
                            "id": "cff14785bdb8",
                            "placeholder": "查询对应监测站点信息如：海淀万柳"
                        },
                        {
                            "type": "submit",
                            "label": "查询",
                            "level": "primary"
                        }
                    ],
                    "id": "u:f1543554ef3d"
                }
            ],
            "actions": [],
            "id": "u:5b31d1f734d5"
        }
        let amisScoped = amis.embed('#search-box', amisJSON, {serverUrl: "serverUrl"});

    })()


    //创建和初始化地图函数：
    function initMap(data) {
        //获取数据
        returnData = data;
        if (returnData.length <= 0) {
            alert("暂无相关数据");
            initStaticMap()
        } else {
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMapOverlay();//向地图添加覆盖物
        }
    }


    function createMap() {
        map = new BMap.Map("map");
        if (returnData.length <= 0) {
            map.centerAndZoom(new BMap.Point(116.403874, 39.914889), 12);//静态
        } else {
            map.centerAndZoom(new BMap.Point(returnData[0].longitude, returnData[0].latitude), 12);
        }
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    //鼠标事件
    function addClickHandler(target, window) {
        target.addEventListener("mouseover", function () {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlay() {
        for (var index = 0; index < returnData.length; index++) {
            const MAPPoniter = new BMap.Point(returnData[index].longitude, returnData[index].latitude)
            // 创建图像标注实例 默认样式是个红点 可进行设置
            // 这里设置为data中的一base64蓝色点图片
            const blueIcon = new BMap.Icon(this.bluePoint, new BMap.Size(32, 38))
            const MAPMarker = new BMap.Marker(MAPPoniter, {icon: blueIcon})

            // 设置标签 内容 偏移量
            const label = new BMap.Label(returnData[index].stationName, {
                offset: new BMap.Size(-27, 32)
            })
            // 标签样式
            label.setStyle({
                border: 'none',
                background: '#ACACAC',
                fontSize: 20,
                fontWeight: 'bold',
                color: 'red'
            })
            // 设置标签
            MAPMarker.setLabel(label)

            // 设置 hover 时显示的点的名称
            MAPMarker.setTitle(returnData[index].stationName)

            // 点击事件监听
            var opts = {
                width: 100,     // 信息窗口宽度
                height: 120,     // 信息窗口高度
                title: "监测站点信息",//returnData[index].stationName,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(infoBox(returnData[index]), opts);
            // MAPMarker.setLabel(label);
            addClickHandler(MAPMarker, infoWindow);
            /*            MAPMarker.addEventListener('click', function (e) {
                            console.log(e)
                            console.log("info:"+returnData[index])
                            infoBox(returnData[index])
                        })*/
            map.addOverlay(MAPMarker)
        }
    }

    function infoBox(itemOpt) {
        var strHtml = '<div>';
        strHtml += '<table class="table">';
        strHtml += '<tr><td style="text-align:center"><td>' + itemOpt.stationName + '</td></td></tr>';
        strHtml += '<tr><td colspan="2" style="text-align:center">站点编号：</td><td>' + itemOpt.id + '</td></tr>';
        // strHtml += '<tr><td colspan="2" style="text-align:center">站点名称：</td><td>' + itemOpt.stationName + '</td></tr>';
        strHtml += '<tr><td colspan="2" style="text-align:center">经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度：</td><td>' + itemOpt.longitude + '</td></tr>';
        strHtml += '<tr><td colspan="2" style="text-align:center">维&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度：</td><td>' + itemOpt.latitude + '</td></tr>';
        // strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td></tr>';
        strHtml += '</table>';
        strHtml += '</div>'
        return strHtml;
    }

    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true});
        map.addControl(overviewControl);
    }

    var map;


    function initStaticMap() {
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(116.403874, 39.914889), 12);//静态
        setMapEvent();
    }

    initStaticMap();
    // initMap();
</script>

</body>
</html>